import { useState } from "react";
import { useDispatch } from "umi";
import { message } from 'antd'
import styles from './index.less'
import { emojis } from "@/utils/emojis";

interface IArtCommend {
    artId?: string,
    artUrl?: string
}
const ArtCommend:React.FC<IArtCommend> = ({artUrl,artId}) => {

  // Hook 分发 action 方法
  const dispatch = useDispatch();

     //   类似受控组件
  const [con, editCon] = useState('')
  function editConEvent(e: React.ChangeEvent) {
    editCon((e.target as HTMLInputElement).value)
  }
  

  // 提交评论    
  function commitEvent() {

    const payload = {
      email: '23434353454@qq.com',
      hostId: artId,
      name: "ewrew",
      url: artUrl,
      content: con
    }
    
    if (con) {
    
      dispatch({
        type: 'commend/AddArticleCommend',
        payload
      })
      message.success('评论成功');
      editCon('');
    } else {
      message.success('评论失败');
    }
  }

  function addemojis(lis: string) {
    editCon((con) => {
      return con + lis
    });
   
  }

   // 表情
   const [flag, setFlag] = useState(false);
   const [kid, setKid] = useState('');
   function emojisflag(id:string='') {
     setFlag(!flag);
     setKid(id)
   }

   const arry: any = [];
  let object: any = emojis;

  Object.keys(object).forEach(function (key: string) {
    arry.push(object[key]);
  })



    return <div>
      {/* { 评论 } */}
      <div className={styles.comment_bottom} >
        <div className={styles.textarea}> 
            <textarea name="" placeholder='请输入评论内容&emsp;(支持markdown)' value={con}
              onChange={(e) => editConEvent(e)}
            ></textarea>
            <div className={styles.btns}>
              
              <div className={styles.emo}>
                <span onClick={()=>emojisflag('')}>
                  <svg viewBox="0 0 1024 1024" width="18px" height="18px"><path d="M288.92672 400.45568c0 30.80192 24.97024 55.77216 55.77216 55.77216s55.77216-24.97024 55.77216-55.77216c0-30.7968-24.97024-55.76704-55.77216-55.76704s-55.77216 24.97024-55.77216 55.76704z m334.60224 0c0 30.80192 24.97024 55.77216 55.77216 55.77216s55.77216-24.97024 55.77216-55.77216c0-30.7968-24.97024-55.76704-55.77216-55.76704s-55.77216 24.97024-55.77216 55.76704z m-111.5392 362.4704c-78.05952 0-156.13952-39.08096-200.75008-100.3776-16.77312-22.31296-27.84256-50.15552-39.08096-72.45824-5.53472-16.77312 5.5296-33.4592 16.77312-39.08096 16.77312-5.53472 27.84256 5.53472 33.46432 16.768 5.53472 22.30784 16.77312 39.08608 27.84256 55.77728 44.61568 55.76704 100.38272 83.69664 161.664 83.69664 61.30176 0 122.7008-27.84256 156.16-78.07488 11.15136-16.77824 22.30784-38.99904 27.84256-55.77728 5.62176-16.768 22.30784-22.30272 33.4592-16.768 16.768 5.53472 22.30784 22.30272 16.768 33.4592-5.61152 27.84256-22.2976 50.14528-39.08096 72.45824-38.912 61.37856-116.98176 100.3776-195.06176 100.3776z m0 194.51392C268.4928 957.44 66.56 755.52256 66.56 511.99488 66.56 268.48256 268.4928 66.56 511.98976 66.56 755.50208 66.56 957.44 268.48256 957.44 511.99488 957.44 755.52256 755.50208 957.44 511.98976 957.44z m0-831.45728c-213.78048 0-386.00192 172.21632-386.00192 386.01216 0 213.8112 172.22144 386.0224 386.00192 386.0224 213.80096 0 386.0224-172.2112 386.0224-386.0224 0-213.79584-172.22144-386.01216-386.0224-386.01216z" fill="currentColor"></path></svg>
                  表情</span>
                {flag && kid==='' && <ul className={styles.demobox}>
                  {
                    arry.map((item: string) => {
                      return <li onClick={() => addemojis(item)}>{item}</li>
                    })
                  }
                </ul>}
              </div>

              <button onClick={() => commitEvent()}>发布</button>
            </div>
          </div>
    </div>
    </div>

}

export default ArtCommend;
















